<template>
    <div style="font-size: 10px;">
        姓：<el-input type="text" v-model="data.lastName"></el-input><br>
        名：<el-input type="text" v-model="data.firstName"></el-input><br>
    </div>
    <el-button @click="sum++">增加</el-button>
    <el-button @click="msg='hello'">改变msg</el-button>
</template>
<script setup>
    import { ref, reactive, watch } from 'vue'
    import { ElInput, ElButton } from 'element-plus';
    import { useHead } from '@vueuse/head';

    useHead({
        title: 'Vue监听属性',
        meta: [
            { name: 'description', content: 'Vue监听属性' }
        ]
    });
    const sum = ref(0);
    const msg = ref("data")
    // 1、监听一个ref
    watch(sum, (newVal, oldVal) => {
        console.log(newVal, oldVal)
    })
    // 2、监听多个ref
    watch([msg,sum], (newVal, oldVal) => {
        console.log(newVal, oldVal)
    })

    const data = reactive({
        lastName: 'W',
        firstName: 'S',
    })
    // 3、监听reactive对象的属性
    watch(() => data.lastName, (newVal, oldVal) => {
        console.log(newVal, oldVal)
    })
    watch(() => data.firstName, (newVal, oldVal) => {
        console.log(newVal, oldVal)
    })
    // 4、 监听多个
    watch([() => data.lastName, () => data.firstName], (newVal, oldVal) => {
        console.log(newVal, oldVal)
    })

    ////////////////////// 监听对象的变化
    let person = ref({
        name:"张三",
        age:18,
        job:{
            j1:{
              salary:20
            }
        }
    })
    // 监听的是 person 这个 ref 引用本身的变化
    // 不会监听 person.value 内部属性的变化
    watch(person,(newValue,oldValue)=>{
      console.log(newValue,oldValue)
    })
    // 监听的是 person.value 这个响应式对象
    // 默认开启深度监听（deep: true）
    // 只要对象内部任意属性变化，都会触发
    watch(()=>person.value,(newValue,oldValue)=>{
        console.log(newValue,oldValue)
    })

</script>